<template>
<div class="controller-box">
  <Header>
    <div class="header-box">
      <UserOutlined/> <span style="display: inline-block; width: 75px; font-size: 14px;">{{ userNickName }}</span>
      <HomeOutlined @click="toUrl('analyse-data')" title="首页"/>
<!--      <SettingOutlined/>-->
      <LogoutOutlined @click="logout" title="注销登录"/>
    </div>
  </Header>
  <div class="content">
    <Menu></Menu>
    <a-spin :spinning="loading" delay="300" tip="加载中...">
      <div class="content-box">
        <router-view/>
      </div>
    </a-spin>
  </div>
</div>
</template>
<script lang="ts">
import Header from "@/components/SHeader/ControllerHeader.vue"
import Menu from "@/components/SLeftMenu/LeftMenu.vue"
import config from "@/config"
import {defineComponent,computed, onBeforeMount,onMounted,ref} from "vue";
import {UserOutlined, HomeOutlined, SettingOutlined, LogoutOutlined} from '@ant-design/icons-vue';
import {useStore} from "vuex"
import {useRoute, useRouter} from "vue-router";
import axios from "@/utils/axios";
export default defineComponent({
  components:{
    Header, Menu, UserOutlined, HomeOutlined, SettingOutlined, LogoutOutlined
  },
  setup(){
    const router = useRouter()
    const route = useRoute()
    const store = useStore()
    const loading = computed(() => store.getters["load/isloading"])
    const token = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserInfo"])).token)
    // 用户昵称
    const userNickName:any = ref()

    // 跳转
    const toUrl = (url:string)=>{
      router.push(url)
    }

    // 注销
    const logout = ()=>{
      store.commit("userinfo/logout")
      router.push("/login")
    }
    const fetchMapUrl = ()=> {
      let mapUrl = "https://zhihuigongdi.cn/map-resource/mapAdress/?ordering=-mdate&prjCode=HEB"
      axios.get(mapUrl).then((res: any) => {
        if (res){
          let ary = res
          if (ary.length>0){
            let obj = ary[0]
            // config.map.airUrl =  obj.mapUrl
            let strAry = obj.mapUrl.split(config.projectName)
            if (strAry.length>1){
              let url = "https://zhihuigongdi.cn/map/".concat(config.projectName).concat(strAry[1])
              store.commit("mapUrl/setMapAddress",url)
              config.map.airUrl = url
            }
          }
        }
      }).catch((error: any) => {
        console.log("error:" + error)
      })
    }
    // 显示登录账号名称
    const getUserName = ()=>{
      axios.get('https://zhihuigongdi.cn:6033/isLogin/',
          {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'token': token.value
            }
          }).then((res:any)=>{
        if (res.code == 0) {
          userNickName.value = res.data.nickName
        }
      })
    }
    onMounted(()=>{
      fetchMapUrl()
      getUserName()
    })

    return{
      loading,
      toUrl,
      logout,
      userNickName,
    }
  }
})
</script>

<style lang="scss" scoped>
.controller-box{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .header-box{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
    align-items: flex-end;
    background: #F7F9FC;
    span{
      width: 40px;
      height: 40px;
      font-size: 22px;
    }
  }
  .content{
    display: flex;
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    background: #FFF;
    .content-box{
      width: 100%;
      height: 100%;
    }
    >::v-deep .ant-spin-nested-loading{
      display: flex;
      flex: 1;
      height: 100%;
      padding: 26px 46px;
      box-sizing: border-box;
      overflow-x: hidden;
      >.ant-spin-container{
        flex: 1;
      }
    }
  }
}
</style>
